<template>
  <view class="page-container">
    <!-- 会员查询区域 -->
    <view class="query-area">
      <view class="query-title">会员查询</view>
      <view class="input-group">
        <input 
          type="text" 
          placeholder="会员卡/手机号/ID" 
          v-model="queryText"
          class="query-input"
        />
        <button class="query-btn" @click="searchMember">查询</button>
      </view>
      <button class="scan-btn" @click="scanCode">扫一扫</button>
    </view>
    
    <!-- 会员信息展示 -->
    <view class="member-info-area">
      <view class="section-title">会员信息</view>
      <view class="info-content">
        <view class="text-info">
          <view class="info-item">姓名: {{ memberInfo.name }}</view>
          <view class="info-item">卡号: {{ memberInfo.cardNo }}</view>
          <view class="info-item">手机: {{ memberInfo.phone }}</view>
          <view class="info-item">注册时间: {{ memberInfo.regTime }}</view>
        </view>
        <view class="avatar-container">
          <image :src="memberInfo.avatar" class="avatar" mode="widthFix"></image>
        </view>
      </view>
    </view>
    
    <!-- 资产信息 -->
    <view class="assets-area">
      <view class="assets-grid">
        <view class="asset-item" v-for="(item, index) in assetsList" :key="index">
          <view class="asset-value">{{ item.value }}</view>
          <view class="asset-name">{{ item.name }}</view>
        </view>
      </view>
    </view>
    
    <!-- 底部菜单 -->
    <view class="menu-area">
      <view class="menu-item" @click="goToTicketList">
        <span class="menu-text">套票列表</span>
        <view class="menu-right">
          <span class="menu-count">12</span>
          <uni-icons type="arrow-right" size="24" color="#999999"></uni-icons>
        </view>
      </view>
      
      <view class="menu-item" @click="goToConsumptionRecord">
        <span class="menu-text">消费记录</span>
        <uni-icons type="arrow-right" size="24" color="#999999"></uni-icons>
      </view>
      
      <view class="menu-item" @click="goToComboOrderRecord">
        <span class="menu-text">套餐购买记录</span>
        <uni-icons type="arrow-right" size="24" color="#999999"></uni-icons>
      </view>
      
      <view class="menu-item" @click="goToPlayRecord">
        <span class="menu-text">游玩记录</span>
        <uni-icons type="arrow-right" size="24" color="#999999"></uni-icons>
      </view>
	  <view class="menu-item" @click="goToExchangeRecord">
        <span class="menu-text">兑换记录</span>
        <uni-icons type="arrow-right" size="24" color="#999999"></uni-icons>
      </view>
      
      <view class="menu-item" @click="goToShareRecord">
        <span class="menu-text">分享记录</span>
        <uni-icons type="arrow-right" size="24" color="#999999"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      queryText: '',
      memberInfo: {
        name: '张三',
        cardNo: '1245646',
        phone: '152xxxxxxxxx',
        regTime: '2025-8-15',
        avatar: 'https://p26-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/16a8616d6fda4ded9016caa41c695836.png~tplv-a9rns2rl98-24:720:720.png?rcl=20251029143141DAFA28AFD6181A81BB1A&rk3s=8e244e95&rrcfp=8a172a1a&x-expires=1762324301&x-signature=rhF5DKJoKtNNLp2%2B3UFrI2Be1zU%3D'
      },
      assetsList: [
        { name: '预存款', value: '12456' },
        { name: '游戏币', value: '12456' },
        { name: '游乐币', value: '12456' },
        { name: '彩票', value: '12456' },
        { name: '电子彩票', value: '12456' },
        { name: '积分', value: '12456' }
      ]
    };
  },
  onLoad() {
    // 隐藏导航栏
    uni.hideNavigationBarLoading();
    uni.setNavigationBarTitle({
      title: ''
    });
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.memberQuery')
  	});
  },
  methods: {
    // 查询会员信息
    searchMember() {
      if (!this.queryText.trim()) {
        uni.showToast({
          title: '请输入查询内容',
          icon: 'none'
        });
        return;
      }
      // 实际项目中这里会调用后端接口查询会员信息
      console.log('查询内容:', this.queryText);
    },
    
    // 扫码功能
    scanCode() {
      uni.scanCode({
        success: (res) => {
          console.log('扫码结果:', res.result);
          this.queryText = res.result;
          // 扫码后自动查询
          this.searchMember();
        },
        fail: (err) => {
          console.log('扫码失败:', err);
          uni.showToast({
            title: '扫码失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 跳转到套票列表
    goToTicketList() {
      uni.navigateTo({
        url: '/pages/member/member-ticket-list'
      });
    },
    
    // 跳转到消费记录
    goToConsumptionRecord() {
      uni.navigateTo({
        url: '/pages/member/member-order-record'
      });
    },
    
    // 跳转到套餐购买记录
    goToComboOrderRecord() {
      uni.navigateTo({
        url: '/pages/member/member-combo-order-record'
      });
    },
    
    // 跳转到游玩记录
    goToPlayRecord() {
      uni.navigateTo({
        url: '/pages/member/member-play-record'
      });
    },
    
    // 跳转到兑换记录
    goToExchangeRecord() {
      uni.navigateTo({
        url: '/pages/member/member-exchange-record'
      });
    },
    
    // 跳转到分享记录
    goToShareRecord() {
      uni.navigateTo({
        url: '/pages/member/member-share-record'
      });
    }
  }
};
</script>

<style scoped>
.page-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 查询区域样式 */
.query-area {
  background-color: #ffffff;
  padding: 30rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.query-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
  color: #333333;
}

.input-group {
  display: flex;
  margin-bottom: 20rpx;
}

.query-input {
  flex: 1;
  height: 80rpx;
  border: 1px solid #dddddd;
  border-radius: 5rpx 0 0 5rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.query-btn {
  width: 160rpx;
  height: 80rpx;
  background-color: #ff3b30;
  color: #ffffff;
  border-radius: 0 5rpx 5rpx 0;
  font-size: 28rpx;
  line-height: 80rpx;
  text-align: center;
  border: none;
}

.scan-btn {
  width: 100%;
  height: 80rpx;
  background-color: #007aff;
  color: #ffffff;
  border-radius: 5rpx;
  font-size: 28rpx;
  line-height: 80rpx;
  text-align: center;
  border: none;
}

/* 会员信息区域 */
.member-info-area {
  background-color: #ffffff;
  padding: 30rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  color: #333333;
  margin-bottom: 25rpx;
  font-weight: 500;
}

.info-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.text-info {
  flex: 1;
}

.info-item {
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 18rpx;
}

.avatar-container {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #eeeeee;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 资产区域样式 */
.assets-area {
  background-color: #ffffff;
  padding: 30rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}

.assets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25rpx;
}

.asset-item {
  text-align: center;
  padding: 15rpx 0;
}

.asset-value {
  font-size: 32rpx;
  color: #ff3b30;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.asset-name {
  font-size: 26rpx;
  color: #666666;
}

/* 底部菜单样式 */
.menu-area {
  background-color: #ffffff;
  border-radius: 10rpx;
  margin-top: 20rpx;
  padding: 0 30rpx;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  border-bottom: 1rpx solid #f0f0f0;
  position: relative;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-text {
  font-size: 28rpx;
  color: #333333;
}

.menu-right {
  display: flex;
  align-items: center;
}

.menu-count {
  font-size: 26rpx;
  color: #999999;
  margin-right: 10rpx;
}
</style>